<template>
  <el-dialog :title="'排房'" :close-on-click-modal="false" :visible.sync="visible" width="30%" :append-to-body="true">
    <el-table v-loading="loading" ref="table" :data="reserveList" style="width: 100%">

      <el-table-column align="right" width="50">
        <template slot-scope="scope">
          <span class="booking_circle_span orange_color verticalAlignUnset" v-if="scope.row.isMainRoom == 1"
            style="margin-left: 4px;">主</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="房型" width="150" prop="roomName"></el-table-column>


      <el-table-column align="center" label="房价">
        <template slot-scope="scope">
          <div>
            <el-popover placement="right" trigger="hover" @show="editRoomPrice(scope.row)">
              <div class="ant-popover-inner-content">
                <div class="recent_price_ul table_recent_price_ul">
                  <table>
                    <thead>
                      <tr>
                        <th>
                          <div class="list_box clear_float">
                            <span style="width: 100%;">价格</span>
                          </div>
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>
                          <div class="list_box clear_float">
                            <span v-for="(priceItem, index) in setPrice.roomPrices.dateList" :key="index">

                              <template v-for="(value, key) in priceItem">
                                <div>{{key}}</div>
                                <div style="margin-bottom: 6px;">
                                    <span>{{value}}</span>
                                </div>

                              </template>

                            </span>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <i class="el-icon-view" slot="reference" style="cursor: pointer;"></i>
            </el-popover>
          </div>
        </template>
      </el-table-column>

      <el-table-column align="left" label="排房" prop="floorRoomId">
        <template slot-scope="scope">
          <div v-if="scope.row.type == 0">
            <div v-if="scope.row.floorRoomEntity">
              <el-button type="text" @click="manualRoomBtn(scope.row)">{{ scope.row.floorRoomEntity.roomSign }}{{ scope.row.floorRoomEntity.roomNum }}</el-button>
            </div>
            <div v-else>
              <el-button @click="manualRoomBtn(scope.row)" type="text">排房</el-button>
            </div>
          </div>
          <div v-else>{{ scope.row.floorRoomEntity.roomSign }}{{ scope.row.floorRoomEntity.roomNum }}</div>
        </template>
      </el-table-column>



      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.type == 1" size="mini">已入住</el-button>
          <el-button v-if="scope.row.isMainRoom == 0" size="mini" @click="settingMeetMainBtn(scope.$index, scope.row)">设主房</el-button>
        </template>
      </el-table-column>

    </el-table>



    <reserveRoomSelect v-if="reserveRoomSelectVisible" ref="reserveRoomSelect" @refreshDataList="refreshPaiFangList"></reserveRoomSelect>
  </el-dialog>
</template>

<script>
  import moment from 'moment';
  import reserveRoomSelect from '../../floorRoomSign/reserve/reserve-paifang';
  export default {
    data() {
      return {
        visible: false,
        loading: false,
        reserveRoomSelectVisible: false,
        peopleId:'',
        selRow: {
          index: 0,
          row: {}
        },
        newPrice: {},
        setPrice: {
          roomPrices: {
            dateList: []
          }
        },
        peopleEntity:{},
        singleEntity:{},
        reserveList:[]
      };
    },
    components: {
      reserveRoomSelect
    },
    methods: {
      init(peopleId) {
        Object.assign(this.$data, this.$options.data())
        this.visible = true;
        this.peopleId = peopleId;
        this.getInfo();
        this.$nextTick(() => {

        })
      },

      refreshPaiFangList(arr) {
        this.$emit('refreClosing')
      },
      manualRoomBtn(row) {
        this.selRow.row = row;
        this.reserveRoomSelectVisible = true;

        this.$nextTick(() => {
          this.$refs.reserveRoomSelect.init(row, moment(this.singleEntity.arrivalsTime).format('YYYY-MM-DD') +
            ' 00:00', this.singleEntity.predissociationTime);
        });
      },
      editRoomPrice(item) {
        this.setPrice = {};
        // this.priceVisible = true;
        this.newPrice = item;
        this.setPrice = {
          roomPrices: {
            ...item.prices
          }
        };
      },
      settingMeetMainBtn(index, row) {
        this.$confirm('是否确定设为主房?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //发起请求
          this.$http({
            url: this.$http.adornUrl(
              `/hotel/roomReservation/settingMeetMain_room/${this.singleEntity.id}`),
            method: 'get',
            params: this.$http.adornParams({
              id: row.id
            })
          }).then(async ({
            data
          }) => {
            if (data && data.code === 0) {
              this.$emit('refreClosing');
              this.getInfo();
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }).catch(() => {

        });
      },
      getInfo() {
        this.loading = true;
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelfloorroomcheckinsingle/pop_single/${this.peopleId}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.peopleEntity = data.data.peopleEntity;
            this.singleEntity = data.data.singleEntity;
            this.reserveList = data.data.singleReserveEntities;
          } else {
            this.$message.error(data.msg);
          }
          this.loading = false;
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .dl_drop {
    color: rgba(0, 0, 0, 0.65);
    z-index: 999;
    border-radius: 4px;
    overflow: hidden;
  }

  .dl_drop dd {
    padding: 0 15px;
    font-size: 13px;
    height: 35px;
    line-height: 35px;
    cursor: pointer;
    white-space: nowrap;
    margin: 0px;
  }

  .el-form {
    /deep/ .el-radio+.el-radio {
      margin-left: 0;
      margin-bottom: 5px;
    }
  }

  .ant-popover-inner-content {
    padding: 12px 16px;
    color: #002140;

    .table_recent_price_ul {
      max-width: 900px;

      table {
        border-collapse: collapse;
        width: 100%;

        thead,
        th,
        tr,
        tt,
        u,
        ul,
          {
          font: inherit;
          font-size: 100%;
          margin: 0;
          padding: 0;
          vertical-align: initial;
          border: 0;
        }


      }

    }

  }

  .recent_price_ul table th>.list_box>span {
    line-height: 36px;
    background: #f0f0f0;
    height: 36px;
  }

  .table_recent_price_ul.table_recent_price_ul table tbody tr td:first-of-type .list_box span {
    height: calc(100% + 1px);
  }

  .recent_price_ul table td>.list_box>span {
    height: 95px;
  }

  .recent_price_ul table td>.list_box>span,
  .recent_price_ul table th>.list_box>span {
    float: left;
    width: 150px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, .25);
    margin-left: -1px;
    margin-top: -1px;
  }

  .recent_price_ul table td:first-of-type>.list_box span>div:first-of-type,
  .recent_price_ul table td>.list_box>span>div:first-of-type {
    margin-top: 8px;
    margin-bottom: 6px;
  }

  .table_recent_price_ul.table_recent_price_ul td:nth-of-type(2) .list_box {
    max-height: 340px;
    overflow: auto;
  }
</style>
